<template>
  <!--页尾-->
  <div class="footer">
    <div class="footer0">
      <div class="footer01">
        <h5>友情链接</h5>
        <ul>
          <li><a href="http://sc.cdtf.gov.cn/chengdu/index.shtml" target="_blank">成都人民政府</a></li>
          <li><a href="http://scjg.chengdu.gov.cn/" target="_blank">成都市市场监督管理局</a></li>
          <li><a href="http://www.hunan.gov.cn/" target="_blank">湖南省人民政府</a></li>

        </ul>
      </div>
      <div class="footer02">
        <h5>著名美食</h5>
        <ul>
          <li><a href="https://baike.baidu.com/item/%E9%92%B5%E9%92%B5%E9%B8%A1/4403692" target="_blank">钵钵鸡</a></li>
          <li><a href="https://baike.baidu.com/item/%E5%A4%AB%E5%A6%BB%E8%82%BA%E7%89%87/120778" target="_blank">夫妻肺片</a></li>
        </ul>
      </div>
      <div class="footer03">
        <h5>联系我们</h5>
        <ul>
          <li><a href="#" target="_blank">QQ邮箱：1767955958@qq.com</a></li>
          <li><a href="#" target="_blank">电话：12345678911</a></li>
        </ul>
      </div>
      <div class="footer04">
        <h5>了解更多</h5>
        <ul>
          <li><a href="https://www.baidu.com/" target="_blank">百度</a></li>
          <li><a href="https://www.zhihu.com/" target="_blank">知乎</a></li>
        </ul>
      </div>
    </div>
    <div class="footer1">
      <ul>
        <li><a href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&client_id=101559500&redirect_uri=https:%2F%2Fcpo.qq.com%2Fconnect%2Fcallback&scope=get_user_info" target="_blank">QQ</a></li>
        <li><a href="https://weibo.com/login.php/" target="_blank">微博</a></li>
        <li><a href="https://wx2.qq.com/" target="_blank">微信</a></li>
        <li><a href="http://www.google.cn/" target="_blank">谷歌</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "bottom"
}
</script>

<style scoped>

.footer{
  height: 300px;
  background-color: #242323;
  margin-top: 20px;
}
.footer0{
  width:1240px;
  height: 200px;
  /*background-color: #ed7b7b;*/
  margin: 5px auto;
}
.footer0 .footer01,.footer0 .footer02,.footer0 .footer03,.footer0 .footer04{
  float: left;
  height: 200px;
  width:300px;
  margin-right: 10px;
}
.footer01 h5,.footer02 h5,.footer03 h5,.footer04 h5{
  font-family: 楷体;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  color: #ffffff;
  padding-top: 25px;
}
.footer1{
  width:800px;
  height: 90px;
  margin: 5px auto;
}
.footer01,.footer02,.footer03,.footer04{
  text-align: center;     /*文本居中*/
}
.footer01 ul li a,.footer02 ul li a,.footer03 ul li a,.footer04 ul li a{
  display: block;
  margin-top: 10px;
  font-family: 楷体;
  font-size: 18px;
  color: darkgrey;
}
.footer01 ul li a:hover,.footer02 ul li a:hover,.footer03 ul li a:hover,.footer04 ul li a:hover{
  color: #c82412;
}
.footer1 ul li{
  float: left;
  margin-left: 120px;
  margin-top: 40px;
}
.footer1 ul li a{
  font-family: 楷体;
  font-size: 18px;
  color: darkgrey;
}
.footer1 ul li a:hover{
  color: #c82412;
}
li{
  list-style: none;
}
</style>
